<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			.area {
				margin: 0px auto 0px auto;
			}
			
			.mui-segmented-control.mui-segmented-control-inverted~.mui-slider-progress-bar {
				background-color: deepskyblue;
			}
			
			.mui-input-group:first-child {
				margin-top: 20px;
			}
			
			.mui-input-group label {
				width: 30%;
			}
			
			.mui-input-row {
				position: relative;
				margin: -8px;
			}
			
			.mui-input-row label {
				float: left;
				width: 31%;
				color: #AAAAAA;
			}
			
			.mui-input-row label~input,
			.mui-input-row label~select,
			.mui-input-row label~textarea {
				width: 45%;
				float: left;
			}
			
			.mui-checkbox input[type=checkbox],
			.mui-radio input[type=radio] {
				top: 6px;
			}
			
			.mui-content-padded {
				margin-top: 25px;
			}
			
			.mui-btn {
				height: 40px;
				padding: 5px;
			}
			
			#passwordc {}
			
			#return {
				float: left;
				width: 43%;
				border: none;
				background-color: #AAAAAA;
				height: 35px;
				margin-top: 10px;
			}
			
			#reg {
				float: right;
				width: 53%;
				border: none;
				height: 35px;
				margin-top: 10px;
				background-color: deepskyblue;
			}
			
			#sliderSegmentedControl a.mui-active {
				color: deepskyblue;
			}
			
			#Sendauthenticationcode {
				font-size: 11px;
				font-weight: 600;
				color: deepskyblue;
				float: right;
				padding: 10px;
				border: 1px solid deepskyblue;
				border-radius: 10px;
				width: 85px;
			}
			
			#showpasswordeye1 {
				width: 20px;
				float: right;
				margin: 13px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">注册</h1>
		</header>

		<style>
			.mui-control-content {
				background-color: white;
				min-height: 140px;
			}
			
			.mui-control-content .mui-loading {
				margin-top: 50px;
			}
		</style>

		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
					<a class="mui-control-item mui-active" href="#item1mobile">
						手机号注册
					</a>
					<a class="mui-control-item" href="#item2mobile">
						邮箱注册
					</a>
				</div>
				<div id="sliderProgressBar" class="mui-slider-progress-bar mui-col-xs-6"></div>
				<div class="mui-slider-group">
					<div id="item1mobile" class="mui-slider-item mui-control-content mui-active">
						<div id="scroll1" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<ul class="mui-table-view">
									<li class="mui-table-view-cell">
										<div class="mui-input-row">
											<label>手机号:</label>
											<input type="button" id="Sendauthenticationcode" value="发送验证码" onclick="sendSmsCode('phoneNum',this,'getRegisterPhoneCode')"></span>
											<input id='phoneNum' type="number" class="mui-input" required="required" oninvalid="请输入手机号" requiredGroup=0>
										</div>
									</li>
									<li class="mui-table-view-cell">
										<div class="mui-input-row">
											<label>短信验证码:</label>
											<input id='text' type="password" class="mui-input" required="required" oninvalid="请输入短信验证码" requiredGroup=0>
										</div>
									</li>
									<li class="mui-table-view-cell">
										<div class="mui-input-row">
											<input type="image" id="showpasswordeye1" src="images/login/闭眼.png" onclick="showPassWord('password_confirm',this);return false;">
											<label id="passwordc">密码:</label>
											<input id='password_confirm' type="password" class="mui-input" required="required" oninvalid="请输入密码" requiredGroup=0>
										</div>
									</li>
								</ul>
							</div>
						</div>
					</div>
					<div id="item2mobile" class="mui-slider-item mui-control-content">
						<div id="scroll2" class="mui-scroll-wrapper">
							<div class="mui-scroll">
								<div class="mui-table-view">
									<ul class="mui-table-view">
										<li class="mui-table-view-cell">
											<div class="mui-input-row">
												<label>邮箱:</label>
												<input id='email' type="email" class="mui-input" required="required" oninvalid="请输入邮箱" requiredGroup=1>
											</div>
										</li>
										<li class="mui-table-view-cell">
											<div class="mui-input-row">
												<label>密码:</label>
												<img id="showpasswordeye1" src="images/login/闭眼.png" onclick="showPassWord('password',this);return false;" />
												<input id='passwordE' type="password" class="mui-input" required="required" oninvalid="请输入密码" requiredGroup=1>
											</div>
										</li>
										<li class="mui-table-view-cell">
											<div class="mui-input-row">
												<label id="passwordc">确认密码:</label>
												<img id="showpasswordeye1" src="images/login/闭眼.png" onclick="showPassWord('password_confirmE',this);return false;" />
												<input id='password_confirmE' type="password" class="mui-input" required="required" oninvalid="请输入确认密码" requiredGroup=1 zcySameWith="passwordE">
											</div>
										</li>
									</ul>
								</div>

							</div>
						</div>

					</div>
				</div>
			</div>
			<div class="mui-content-padded">
				<button id='return' class="mui-btn mui-btn-block mui-btn-primary zcy-login-herf" onclick="">返回登录</button>
				<button id='reg' class="mui-btn mui-btn-block mui-btn-primary" onclick="onRegister()">注册</button>
			</div>
		</div>
		<script src="js/jquery-2.1.0.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/zcy.js"></script>
		<script>
		</script>
		<script src="js/app.js"></script>
		<script>
			(function($, doc) {
				$.init();
				$.plusReady(function() {
					var settings = app.getSettings();
					var regButton = doc.getElementById('reg');
					var accountBox = doc.getElementById('account');
					var passwordBox = doc.getElementById('password');
					var passwordConfirmBox = doc.getElementById('password_confirm');
					var emailBox = doc.getElementById('email');
					regButton.addEventListener('tap', function(event) {
						var regInfo = {
							account: accountBox.value,
							password: passwordBox.value,
							email: emailBox.value
						};
						var passwordConfirm = passwordConfirmBox.value;
						if(passwordConfirm != regInfo.password) {
							plus.nativeUI.toast('密码两次输入不一致');
							return;
						}
						app.reg(regInfo, function(err) {
							if(err) {
								plus.nativeUI.toast(err);
								return;
							}
							plus.nativeUI.toast('注册成功');
							$.openWindow({
								url: 'login.html',
								id: 'login',
								show: {
									aniShow: 'pop-in'
								}
							});
						});
					});
				});
			}(mui, document));
			var type = 0;

			function onRegister() {

				switch(type) {
					case 0: //手机注册
						if(!validate(0)) return false;
						var smsPhoneNumTextBox = $("#phoneNum");
						var smsCodeTextBox = $("#text");
						var smspassWordTextBox = $("#password_confirm");
						$.zcypost("registerByPhone", {
							phone: smsPhoneNumTextBox.val(),
							password: smspassWordTextBox.val(),
							code: smsCodeTextBox.val()
						}, function(d) {
							mui.toast('注册成功！');
							setTimeout(function() {
								location.href = ('login.html')
							}, 500);
						});
						break;
					case 1:
						if(!validate(1)) return false;
						var emailTextBox = $("#email");
						var emailPasswordTextBox = $("#passwordE");
						$.zcypost("registerByEmail", {
							email: emailTextBox.val(),
							password: emailPasswordTextBox.val(),

						}, function(d) {
							mui.toast('注册成功！');
							setTimeout(function() {
								location.href = ('login.html')
							}, 500);
						});
						break;
					default:
						break;
				}
			}
			$(function() {
				document.querySelector('.mui-slider').addEventListener('slide', function(event) {
					if(event.detail.slideNumber === 0) {
						$("#reg").html("注册");
						type = 0;
					} else if(event.detail.slideNumber === 1) {
						$("#reg").html("注册");
						type = 1;
					}
				});
			})
		</script>
	</body>

</html>